<script setup>
  import { getUserInfo, updateUserInfo, changePassword } from '@/api'
  import PageLayout from '@/components/PageLayout.vue'
  import { useDynamicForm } from '@/hooks'
  import { ref, onMounted, computed } from 'vue'
  import { ElMessage } from 'element-plus'

  const { openForm } = useDynamicForm()

  //用户信息数据
  const userInfo = ref({})

  //获取用户信息
  const handleGetUserInfo = async () => {
    try {
      const res = await getUserInfo()
      userInfo.value = res.data.user
    } catch (error) {
      ElMessage.error('获取用户信息失败')
    }
  }

  // 格式化性别显示
  const genderText = computed(() => {
    return userInfo.value.gender === 1 ? '男' : '女'
  })

  // 格式化状态显示
  const statusText = computed(() => {
    return userInfo.value.status === 1 ? '启用' : '禁用'
  })

  // 编辑个人信息
  const onEditProfile = () => {
    openForm({
      title: '编辑个人信息',
      width: 500,
      fields: [
        {
          key: 'realName',
          label: '真实姓名',
          required: true,
          default: userInfo.value.realName,
        },
        {
          key: 'gender',
          label: '性别',
          type: 'select',
          required: true,
          default: userInfo.value.gender,
          options: [
            { label: '男', value: 1 },
            { label: '女', value: 0 },
          ],
        },
        {
          key: 'phone',
          label: '电话',
          required: true,
          default: userInfo.value.phone,
        },
        {
          key: 'email',
          label: '邮箱',
          required: true,
          default: userInfo.value.email,
        },
      ],
      onConfirm: async (formData, { close, setLoading }) => {
        setLoading(true)
        try {
          const updateData = {
            ...formData,
            id: userInfo.value.id,
          }
          await updateUserInfo(updateData)
          ElMessage.success('个人信息更新成功')
          await handleGetUserInfo() // 重新获取用户信息
          close()
        } catch (error) {
          ElMessage.error('个人信息更新失败')
        } finally {
          setLoading(false)
        }
      },
    })
  }

  //修改密码
  const onEditPassword = () => {
    openForm({
      title: '修改密码',
      width: '500px',
      fields: [
        {
          key: 'oldPassword',
          label: '旧密码',
          required: true,
          default: () => '',
        },
        {
          key: 'newPassword',
          label: '新密码',
          required: true,
          default: () => '',
        },
      ],
      onConfirm: async (formData, { close, setLoading }) => {
        if (formData.oldPassword === formData.newPassword) {
          ElMessage.error('新密码不能与当前密码相同')
          return
        }

        setLoading(true)
        try {
          const updateData = {
            oldPassword: formData.oldPassword,
            newPassword: formData.newPassword,
            userId: userInfo.value.id,
          }
          await changePassword(updateData)
          ElMessage.success('修改密码成功')
          close()
        } catch (error) {
          ElMessage.error('修改密码失败')
        } finally {
          setLoading(false)
        }
      },
    })
  }
  //刷新用户信息
  const onFresh = () => {
    handleGetUserInfo()
  }

  // 页面加载时获取用户信息
  onMounted(() => {
    handleGetUserInfo()
  })
</script>

<template>
  <page-layout>
    <template #header>
      <el-button @click="onFresh">刷新</el-button>
      <el-button @click="onEditProfile" type="warning">修改个人信息</el-button>
      <el-button @click="onEditPassword" type="info">修改密码</el-button>
    </template>

    <el-descriptions :column="2" class="margin-top" title="个人信息" border>
      <el-descriptions-item label="id">{{ userInfo.id }}</el-descriptions-item>
      <el-descriptions-item label="用户名称">{{ userInfo.username }}</el-descriptions-item>
      <el-descriptions-item label="真实姓名">{{ userInfo.realName }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{ genderText }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ userInfo.phone }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ userInfo.registeredTime }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ statusText }}</el-descriptions-item>
    </el-descriptions>
  </page-layout>
</template>

<style scoped lang="less">
  .el-descriptions {
    margin-top: 20px;
  }
  .margin-top {
    margin-top: 20px;
  }
</style>
